<!--
 * name:左侧主要数据
 * author:phx
 * date:2021.7.1
-->
<template>
    <div class="main-wrapper">
        <ul class="count-warp">
            <li>
                <div class="pic">
                    <img src="../../assets/img/icon/icon_top1.png">
                </div>
                <div class="text">
                    <h3>{{totalData.userTotal}}</h3>
                    <p>注册人数(个)</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="../../assets/img/icon/icon_top2.png">
                </div>
                <div class="text">
                    <h3>{{totalData.orgTotal}}</h3>
                    <p>认证企业(家)</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="../../assets/img/icon/icon_top3.png">
                </div>
                <div class="text">
                    <h3>{{totalData.deviceTotal}}</h3>
                    <p>接入设备(台)</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="../../assets/img/icon/icon_top4.png">
                </div>
                <div class="text">
                    <h3>{{totalData.capacityTotal}}</h3>
                    <p>存储容量(T)</p>
                </div>
            </li>
        </ul>
        <div class="map-wrapper">
            <div class="map">
                <EchartsMap :dataByLocal="dataByLocal" v-if="dataByLocal.length>0"></EchartsMap>
            </div>
        </div>
    </div>
</template>

<script>
    import EchartsMap from '@/components/Echarts/EchartsMap';

    export default {
        name: "mainData",
        components: {
            EchartsMap
        },
        props: {
            totalData: {
                type: Object,
                default() {
                  return {};
                },
            },
            dataByLocal:{
                type: Array,
                default() {
                  return [];
                },
            }
        },
    }
</script>

<style scoped type="text/less" lang="less">
    .main-wrapper {
        width: 100%;
    }

    ul.count-warp {
        padding: 0 14px 14px;
        display: flex;
        height: 9vh;
        li {
            margin-right: 45px;
            width: calc((100% - 135px) / 4);
            display: flex;
            height: 100%;
            .pic {
                margin-right: 10px;
                width: 84px;
                height: 84px;
            }
            .text {
                margin-top: 15px;
                h3 {
                    padding-bottom: 10px;
                    color: @wordColor1;
                    font-size: 24px;
                    line-height: 24px;
                }
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }

    .map-wrapper {
        position: relative;
        background-image: url("../../assets/img/bg/bg_k01.png");
        background-size: 100% 100%;
        text-align: center;
        height: 46vh;
        .map {
            position: relative;
            top: 15px;
            margin: 0 auto;
            width: 100%;
            height: 42vh;
        }
    }
</style>
